<template>
  <table-view
      :data="listData"
      :cellStyle="(row)=> {return}"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      border
      default-expand-all
      header-cell-class-name="table-header"
      row-key="id"
  >
    <el-table-column
        label="序号"
        type="index"
        width="100"
    />
    <el-table-column
        label="区域名称"
        prop="salesAreaName"
    />
    <el-table-column
        label="行政地区"
        prop="region"
    >
      <template #default="scope">
        <area-list-view :areas="scope.row.region"/>
      </template>
    </el-table-column>
    <el-table-column
        label="负责营销职员"
        prop="userNames"
    />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
            v-auth="{v: ['crm:area:pms']}"
            type="text"
            @click="changeArea(scope.row)"
        >编辑
        </el-button>
        <el-button
            v-auth="{v: ['crm:area:pms']}"
            class="danger"
            type="text"
            @click="deleteArea(scope.row.id)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </table-view>
  <!-- <Pagination
      :page="formData.page"
      :limit="formData.pageSize"
      style="display: flex; justify-content: flex-end"
      :total="total"
      @pagination="getList"
    /> -->
  <addORedit
      ref="editChangeDialog"
      :title="title"
      @success="success"
  />
</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, ref,} from 'vue'
import {useRouter} from 'vue-router'

export default defineComponent({
  components: {
    addORedit: defineAsyncComponent(() => import('../modules/addORedit.vue')),
  },
  setup(props, context) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')

    const router = useRouter()

    var formData = reactive({
      planStatus: '',
      select_str: '',
      page: 1,
      pageSize: 20,
    })
    var title = ref('')
    var listData = ref([])
    var total = ref(0)
    const editChangeDialog = ref(null)
    const createArea = () => {
      editChangeDialog.value.open()
      title.value = '添加营销区域'
    }
    const success = () => {
      getList()
    }
    const changeArea = (val) => {
      api.system.SELLAREA_DETAIL(val.id).then((res) => {
        if (!res.code) {
          const a = JSON.parse(JSON.stringify(res.data))
          // if (res.data.region){
          //     a.area = currentInstance.proxy.getCascaderAreaData(res.data.region)
          // fhchchcvhg
          // }
          editChangeDialog.value.open(a)
          title.value = '编辑营销区域'
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    }
    const getList = () => {
      api.system.SELLAREA_LIST().then((res) => {
        console.log(res)
        if (res.code == 0) {
          listData.value = res.data
        }
      })
    }
    const deleteArea = (id) => {
      console.log(currentInstance.proxy)
      currentInstance.proxy
          .alertBox({message: '确认删除此营销区域吗？', title: '确认'})
          .then(() => {
            api.system.SELLAREA_DELETE(id).then((res) => {
              if (res.code == 0) {
                currentInstance.proxy.customMessage({
                  type: 'success',
                  message: res.msg,
                })
                getList()
              } else {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              }
            })
            console.log('确定')
          })
          .catch((err) => {
            console.log(err)
          })
    }
    onMounted(() => {
      getList()
      // getPlanDetail()
    })
    return {
      title,
      currentInstance,
      api,
      router,
      formData,
      listData,
      total,
      success,
      createArea,
      editChangeDialog,
      getList,
      changeArea,
      deleteArea,
    }
  },
})
</script>
